<template>
  <section class="collect wrapper">
    <ArticleCard
      :item="article"
      v-for="article in articles"
      :key="article.id"
    />
  </section>
</template>

<script>
import ArticleCard from "@/components/ArticleCard.vue";
import axios from "axios";
export default {
  name: "LikePage",
  components: {
    ArticleCard,
  },
  data() {
    return {
      articles: [],
      token: "",
      currentPage: 1,
      pageSize: 10,
    };
  },
  created() {
    this.token = localStorage.getItem("token");
    if (!this.token) {
      this.$router.push("/login");
    }
    axios
      .get("http://interview-api-t.itheima.net/h5/interview/opt/list", {
        headers: {
          Authorization: `Bearer ${this.token}`,
        },
        params: {
          optType: 2, // 2 表示收藏
          page: this.currentPage, // 当前页码
          pageSize: this.pageSize, // 每页条数
        },
      })
      .then((res) => {
        console.log(res);
        this.articles = res.data.data.rows;
        // console.log(this.articles);
      })
      .catch((err) => {
        if (err.status === 401) {
          this.$toast("身份信息失效");
          this.$router.push("/login");
        } else {
          this.$toast("获取失败");
        }
      });
  },
  //页面失活
  deactivated() {
    console.log("页面失活");
  },
  //页面激活
  activated() {
    console.log("页面激活");
  },
};
</script>

<style lang="less" scoped>
.collect {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: (10/3.75vw) (10/3.75vw) (71/3.75vw);
  // overflow: hidden;
}
</style>
